<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="origin">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equivmetahttp-equiv="x-ua-compatible" content="IE=7" />
    <title>传感器数据</title>
</head>

<body>
    <div id="text"></div>
    <script src="./cdn/jquery/jquery.min.js" charset="utf-8"></script>
    <script type="text/javascript">
        function getData(lampPoleId, configData) {
            $.ajax({
                type: "post",
                url: '/api/api-env/v1/device-data/pole-id',
                contentType: 'application/json',
                datatype: 'json',
                data: JSON.stringify({
                    poleId: lampPoleId,
                    dataConfig: configData
                }),
                success: function(res) {
                    // 删除现有内容
                    $('.inner').remove()

                    var data = res.data;
                    var text = null;

                    if (!data) {
                        $('#text').append('<span class="inner">暂无信息</span>');
                    } else {
                        // 添加新内容
                        var list = data.list,
                            css = data.css,
                            arr = [];

                        for (var i = 0; i < list.length; i++) {
                            arr.push(list[i].name + ' ' + list[i].value);
                        }
                        text = arr.join(', ');

                        if (text.length === 0) {
                            $('#text').append('<span class="inner">暂无信息</span>');
                            return false
                        }

                        if (css) {
                            $('#text').css({
                                'margin-top': css.top + 'px',
                                'margin-left': css.left + 'px',
                                width: css.width + 'px',
                                height: css.height + 'px',
                                color: css.color,
                                'font-size': css.size + 'px'
                            });
                        }
                        $('#text').append('<marquee direction="left" scrollamount="2" class="inner">' + text + '</marquee>');
                    }
                },
                error: function(res) {
                    $('#text').append('<span class="inner">暂无信息</span>');
                }
            });
        }

        function getLampPoleId(id, configData) {
            var lampPoleId = null
            $.ajax({
                type: "get",
                url: '/api/api-lamp/v1/lamp-pole-device/device-id/' + id,
                contentType: "application/json",
                async: false,
                success: function(res) {
                    lampPoleId = res.data.lampPoleId;
                },
                error: function(res) {
                    $('#text').append('暂无灯杆信息');
                }
            });
            getData(lampPoleId, configData)
            setInterval(function() {
                if (lampPoleId) {
                    getData(lampPoleId, configData)
                }
            }, 60000);
        }

        function init() {
            var query = decodeURIComponent(window.location.href.split('?')[1]),
                vars = query.split("&"),
                id = null,
                configData = ''

            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("="),
                    key = pair[0],
                    value = pair[1]

                switch (key) {
                    case 'id':
                        id = pair[1]
                        break;
                    case 'configData':
                        configData = pair[1]
                        break;
                }
            }
            getLampPoleId(id, configData)
        }

        init()
    </script>
    <style>
        body {
            margin: 0;
        }

        /* .div1 {
            overflow: hidden;
            text-align: center;
        }

        @keyframes anis {
            100% {
                transform: translateX(-100%)
            }
        }

        img {
            position: absolute;
        }

        .div2 {
            white-space: nowrap;
            animation: anis 10s linear infinite;
        }

        .div2:hover {
            animation-play-state: paused;
        } */
    </style>
</body>

</html>